<script>
  import sheep from '@/sheep';
  import { computed } from 'vue';

  export default {
    data() {
      return {
        surnameList: [
          {
            'id': 114,
            'surname': '王',
          },
          {
            'id': 115,
            'surname': '李',
          },
          {
            'id': 109,
            'surname': '张',
          },
          {
            'id': 116,
            'surname': '刘',
          },
        ],
        lastNameInformation: '',
        // 未登录的信息
        informationId: 0,
      };
    },
    computed: {
      sheep() {
        return sheep;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      userInfo() {
        return sheep.$store('user').userInfo;
      },
      isLogin() {
        return sheep.$store('user').isLogin;
      },
      mp_code(){
        return sheep.$store('AI').mp_code;
      },
      version(){
        return sheep.$store('AI').version;
      },
      appVersion(){
        return sheep.$store('app').info.worship_version;
      },
      appVersion2(){
        return sheep.$store('app').info.worship_version_2;
      }
    },
    watch: {
      isLogin: {
        deep: true,
        handler(newValue, oldValue) {
          if (newValue) {
            this.setName();
          }
        },
      },
    },
    async created() {
      await this.setName();
    },
    methods: {
      async setName() {
        this.$nextTick(async () => {
          const { data } = await sheep.$api.surname.getUserSurname();
          this.surnameList = data.list;
          this.lastNameInformation = data.user.surname;
          this.informationId = data.user.id;
          this.$forceUpdate();
        });
      },
      goAIMark() {
        if (this.mp_code == this.appVersion) {
          return;
        }
        uni.navigateTo({
          url: '/pages/message/AIMarketplace',
        });
      },
      // 跳转姓氏详情
      goPath() {
        sheep.$router.go('/pages/chineseSurname/index');
      },
      // 跳转姓氏详情
      goSurnameDetails() {
        if (!this.isLogin || !this.informationId) {
          sheep.$router.go('/pages/chineseSurname/index');
          return;
        }
        sheep.$router.go('/pages/chineseSurname/details_firstAncestor', {
          id: this.informationId,
        });
      },
      // 跳转拜祖
      goToTheLastNamePage() {
        sheep.$router.go('/pages/chineseSurname/index', { index: 1 });
      },
      // 跳转老黄历
      goOldYellowCalendar() {
        sheep.$router.go('/pages/chineseSurname/index', { index: 5 });
      },
    },
  };
</script>

<template>
  <!-- 中华姓氏 -->
  <view class="genealogy_content ss-m-t-12 flex justify-between">
    <view class="genealogy_content_left">
      <view class="genealogy_content_left_top" @click.stop="goPath">
        <view
          class="genealogy_content_left_top_introduced ss-m-t-16 ss-m-l-20 sss-m-b-15 flex align-center justify-between">
          <view class="genealogy_content_left_top_introduced_title">
            <text class="genealogy_content_left_top_introduced_title_text">
              中华姓氏
            </text>
          </view>
        </view>
        <view
          class="genealogy_content_left_top_surname flex align-center justify-between ss-m-l-20 ss-m-r-20 ss-m-t-16 ss-m-b-10">
          <view class="genealogy_content_left_top_surname_list flex align-center justify-center"
                v-for="(item, index) in surnameList"
                :key="index">
            <text class="genealogy_content_left_top_surname_list_text">{{ item.surname }}</text>
          </view>
        </view>
      </view>
      <view class="genealogy_content_left_bottom  flex align-center justify-between"
            @click.stop="goSurnameDetails">
        <view class="genealogy_content_left_bottom_icon ss-m-t-36 ss-m-l-20 ss-m-b-42 flex align-center justify-center">
          <image :src="`${IMG_URL}/index/square.png`" class="genealogy_content_left_bottom_icon_image">
          </image>
          <view class="genealogy_content_left_bottom_icon_label flex align-center justify-center">
            <text class="genealogy_content_left_bottom_icon_label_text">
              {{ !lastNameInformation ? '姓' : lastNameInformation }}
            </text>
          </view>
        </view>
        <view class="genealogy_content_left_bottom_Info ss-m-l-23 ss-m-r-25" style="margin-top: -4rpx">
          <view class="genealogy_content_left_bottom_Info_title flex align-center justify-between">
            <text class="genealogy_content_left_bottom_Info_title_text ss-m-l-32">
              {{
                !lastNameInformation ? '姓氏' : lastNameInformation.length > 1 ? lastNameInformation : lastNameInformation + '姓'
              }}起源
            </text>
          </view>
          <view class="genealogy_content_left_bottom_Info_describe">
            <text class="genealogy_content_left_bottom_Info_describe_text">迁徙分布 家风家训</text>
          </view>
        </view>
      </view>
    </view>
    <view class="genealogy_content_right flex flex-column align-center justify-between">
      <view class="genealogy_content_right_top flex align-center justify-between">
        <view class="genealogy_content_right_top_info flex flex-column align-center justify-center"
              @click.stop="goToTheLastNamePage(1)">
          <view style="width: 62rpx;height: 62rpx;padding: 5rpx;border-radius: 50%;background-color: #F4AB43;"
                class="flex align-center justify-center">
            <image :src="`${IMG_URL}/index/worshipTheAncestorsAndSeekTheRoots_icon.png`"
                   style="width: 57rpx;height: 57rpx;"></image>
          </view>
          <view class="genealogy_content_right_top_info_title">
            <text class="genealogy_content_right_top_info_title_text"
                  style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #A7752A">
              拜祖寻根
            </text>
          </view>
        </view>
        <view class="genealogy_content_right_top_info flex flex-column align-center justify-center"
              @click.stop="goOldYellowCalendar">
          <view style="width: 62rpx;height: 62rpx;padding: 5rpx;border-radius: 50%;background-color: #F4AB43;"
                class="flex align-center justify-center">
            <image :src="`${IMG_URL}/index/genealogicalCalendar.png`" style="width: 47rpx;height: 47rpx;"
            ></image>
          </view>
          <view class="genealogy_content_right_top_info_title">
            <text class="genealogy_content_right_top_info_title_text"
                  style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;color: #A7752A">
              老黄历
            </text>
          </view>
        </view>
      </view>
      <view class="genealogy_content_right_bottom flex align-center justify-between"
            @click.stop="goAIMark"
            v-if="mp_code != appVersion2"
      >
        <view class="icon ss-m-l-16">
          <image :src="`${IMG_URL}/index/AI_icon.png`"></image>
          <text style="white-space: nowrap">AI</text>
        </view>
        <view class="flex flex-column ss-m-l-15" style="width: 600rpx;">
          <view class="name">家庭小助手</view>
          <view class="text1">专业级生成式Ai人工智能</view>
          <view class="text2 flex align-center ml_2">7x24小时为您服务</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  // 家谱中华姓氏
  .genealogy_content {
    width: 702rpx;

    .genealogy_content_left {
      width: 346rpx;
      background: #FFEDC7;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      overflow: hidden;
      border: 2rpx solid #F4AB43;

      .genealogy_content_left_top {
        .genealogy_content_left_top_introduced {
          .genealogy_content_left_top_introduced_title {
            .genealogy_content_left_top_introduced_title_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 38rpx;
              color: #A7752A;
            }
          }
        }

        .genealogy_content_left_top_surname {
          .genealogy_content_left_top_surname_list {
            width: 68rpx;
            height: 68rpx;
            background: #F4AB43;
            border-radius: 12rpx 12rpx 12rpx 12rpx;

            .genealogy_content_left_top_surname_list_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 36rpx;
              color: #FFFFFF;
            }
          }
        }
      }

      .genealogy_content_left_bottom {
        background: #FFEDC7;
        overflow: hidden;
        border-top: 2rpx solid #F4AB43;

        .genealogy_content_left_bottom_icon {
          position: relative;

          .genealogy_content_left_bottom_icon_image {
            width: 72rpx;
            height: 72rpx;
            margin-top: -10rpx;
          }

          .genealogy_content_left_bottom_icon_label {
            width: 54rpx;
            height: 54rpx;
            background: #F4AB43;
            border-radius: 12rpx;
            position: absolute;
            left: 24rpx;
            top: -12rpx;

            .genealogy_content_left_bottom_icon_label_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 36rpx;
              color: #FFFFFF;
            }
          }
        }

        .genealogy_content_left_bottom_Info {
          .genealogy_content_left_bottom_Info_title {
            .genealogy_content_left_bottom_Info_title_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 38rpx;
              color: #A7752A;
            }
          }

          .genealogy_content_left_bottom_Info_describe {
            .genealogy_content_left_bottom_Info_describe_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #A7752A;
            }
          }
        }
      }
    }

    .genealogy_content_right {
      .genealogy_content_right_top {
        width: 342rpx;
        height: 156rpx;

        .genealogy_content_right_top_info {
          width: 164rpx;
          height: 152rpx;
          background: #FAE6BC;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          border: 2rpx solid #F4AB43;

          .genealogy_content_right_top_info_title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 38rpx;
            color: #FFFFFF;
          }

          .genealogy_content_right_top_info_content {
            .genealogy_content_right_top_info_content_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #FFFFFF;
            }
          }
        }
      }

      .genealogy_content_right_bottom {
        width: 342rpx;
        height: 137rpx;
        background: #FFEDC7;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #F4AB43;

        .icon {
          width: 70rpx;
          height: 70rpx;
          position: relative;

          image {
            width: 70rpx;
            height: 70rpx;
          }

          text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 32rpx;
            color: #FFFFFF;
          }
        }

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #A7752A;
        }

        .text1 {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #A7752A;
        }

        .text2 {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 20rpx;
          color: #A7752A;
        }
      }
    }
  }
</style>